<template>
  <div class="margin-top-large font-normal">
    <div class="bg-color-white padding-small">
      <el-row type="flex" align="middle" justify="space-between">
        <el-col :span="8">
          <span class="color-primary font-title" @click="popup=true">{{filterEnum[filterKey]}}&nbsp;<i
            class="fa fa-angle-down"></i></span>
        </el-col>
        <el-col :span="8" class="text-align-end">
          <span class="color-success" v-if="winningStreak"><i class="fa fa-flag fa-2x"></i>&nbsp;连对 <i
            class="fa fa-close"></i> {{winningStreak}} </span>
          <span class="color-silver" v-if="wrongStreak"><i class="fa fa-bug fa-2x"></i>&nbsp;连错 <i
            class="fa fa-close"></i> {{wrongStreak}} </span>
        </el-col>
      </el-row>

    </div>
    <div class="daily" :data-url="dataUrl">
      <template v-for="record in records">
        <div v-if="record.separator" class="padding-small">
          <el-row type="flex" align="middle" justify="space-between">
            <el-col :span="6">
              <span class="font-small color-light-black">{{record.label}}</span>
            </el-col>
            <el-col :span="6">
              <div class="font-small color-primary-light text-align-end"
                   @click="goTranscript(record.label)">
                <i class="fa fa-bar-chart"></i>&nbsp;查看成绩单
              </div>
            </el-col>
          </el-row>
        </div>
        <template v-else>
          <my-question class="bg-color-white" :record="record" @go-detail="goQuestionDetail(record)"></my-question>
          <h-separator :height="'1px'" :width="'100%'" :customClass="'bg-color-extra-light-silver'"></h-separator>
        </template>
      </template>
    </div>
    <!--过滤选项弹窗-->
    <mt-popup v-model="popup" popup-transition="popup-fade">
      <el-card :body-style="{padding:'10px'}" class="font-header color-primary-light">
        <template v-for="(label,key) in filterEnum">
          <div @click="filterKey=key;popup=false" class="margin-large">{{label}}</div>
          <h-separator :height="'1px'" :width="'100%'" :customClass="'bg-color-gray'"></h-separator>
        </template>
      </el-card>
    </mt-popup>
  </div>
</template>
<script type="text/babel">
  import MyQuestion from './MyQuestion.vue';
  import {FakerRecords} from 'store/faker';
  export default {
    data(){
      return {
        filterEnum: {all: '全部', onlyWrong: '只看错题'},
        popup: false,
        filterKey: 'all',
        rawRecords: []
      }
    },
    computed: {
      records(){
        return this.addDaySeparatorTo(this.filterRecords(this.rawRecords));
      },
      winningStreak(){
        let count = 0;
        for (let i = 0; i < this.records.length; i++) {
          if (this.records[i].separator) {
            continue;
          }
          if (this.records[i].result) {
            count++;
          } else {
            break;
          }
        }
        return count;
      },
      wrongStreak(){
        let count = 0;
        for (let i = 0; i < this.records.length; i++) {
          if (this.records[i].separator) {
            continue;
          }
          if (!this.records[i].result) {
            count++;
          } else {
            break;
          }
        }
        return count;
      },
      dataUrl(){
        let url = this.$store.state.app.statUrl + "DidProblemData/getByStudent?student="
          + this.$store.state.app.loginState.serverStudentId;
        this.fetchData(url);
        return url;
      }
    },
    methods: {
      fetchData(url){
        this.$http.get(url)
          .then((response) => {
            this.rawRecords = response.data;
            for (let item of response.data) {
              item.result = item.isGrasp===1;
              item.doProblemDate = new Date(item.doProblemDate);
              item.updateDt = new Date(item.updateDt);
            }
          });
      },
      /**
       * 添加按日的分割栏,record
       */
      addDaySeparatorTo(records){
        let current = null;
        for (let i = 0; i < records.length; i++) {
          let record = records[i];
          let day = this.$func.dateFormat(record.doProblemDate);
          //如果日期有改变，在改变的前一个位置插入一个当前日期的 记号
          if (day !== current) {
            current = day;
            //在当前位置插入记号，由于记号使得数组变长了，i++
            records.splice(i, 0, {separator: true, label: current});
            i++;
          }
        }
        return records;
      },
      /**
       * 根据条件前端过滤结果
       * @returns {*|null}
       */
      filterRecords(records){
        switch (this.filterKey) {
          case 'all':
            //返回新的数组
            return records.concat();
          case 'onlyWrong':
            //js filter函数，返回记录的result属性为false的记录组成的数组
            return records.filter((record) => !record.result);
        }
      },
      goTranscript(date){
        alert('敬请期待更全面的数据分析！');
//        this.$router.push({name: '我的成绩单', params: {date}})
      },
      goQuestionDetail(record){
        this.$router.push({name: '做题详情', params: {record}})
      }
    },
    components: {
      MyQuestion
    }
  };
</script>
